<!-- 库位设置 - 综合表单页面 -->
<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />

    <ex_super_table_page v-bind="option" ref="SuperTablePage" 
      @selection-change="e => selection = e">
      <template v-slot:action-right>
        <el-upload action="" :show-file-list="false" style="display: inline;" :http-request="uploadFile">
          <el-button slot="trigger" size="mini" type="primary">{{ $tt('label_import_excel') }}</el-button>
        </el-upload>
      </template>
    </ex_super_table_page>
    <ex_super_dialog_form ref="formDialog" v-bind="dialog" @afterSubmitSuccess="submitAfter">

    </ex_super_dialog_form>
    <dialog_detail_location ref="dialog_detail_location"></dialog_detail_location>

    <print_sku ref="print_sku" itemKey="id" businessType="LOCATION"/>

  </div>
</template>
<script>
import print_sku from '@/component/print/print_sku'


import page_table_model_manage from '@/mixin/page_table_model_manage';

import superTablePageFunction from '@/mixin/super-table-page-function';
import dialog_detail_location from "./dialog/dialog_detail_location.vue";
export default {
  title: 'title_Warehouse_location_manage',
  mixins: [superTablePageFunction, page_table_model_manage],
  components: { dialog_detail_location, print_sku },
  data() {
    return {
      selection: [],

      option: {
        search: {
          model: [
            { label: "label_warehouse_location_code", key: "code", type: 'input', },
            {
              label: "label_status", key: "status", type: 'select', enum: 'IsAvailableStatusEnum'
            },

            {
              label: "label_warehouse_area", key: "areaId", type: 'base_area_select',//
            },

            {
              label: "label_is_mix", key: "mixFlag", type: 'select', enum: 'YesOrNoEnum',
            },
            {
              label: "label_start_time",
              key: "createDateStart",
              fold: true,
              type: 'date-picker',
              attrs: { type: "datetime" },
            },
            {
              label: "label_end_time",
              key: "createDateEnd",
              fold: true,
              type: 'date-picker',
              attrs: { type: "datetime" },
            },
          ],
        },
        action: [
          {
            label: { _key: 'label_new_any', type: 'label_warehouse_location', i18n: true }, auth: 'wms_location_setting_edit', attrs: { icon: "el-icon-plus" }, click: () => {
              this['$refs']['formDialog'].showNew({
                title: this.$tt({ _key: 'label_new_any', type: 'label_warehouse_location', i18n: true }),
                onlySetData: true,
              })
            }
          },
        ],
        actionExtra: [
          {
            label: 'label_print_barcode', attrs: { type: "primary" }, click: (row) => {
              if (_.isEmpty(this.selection)) {
                return this.$message.error(this.$tt('tip_please_select_order'))
              }
              this.print(this.selection)
            }
          },
          { label: 'label_download_excel_import_temp', click: this.downloadImportTemp },
        ],
        table: {
          url: "/wms-api/base/WmsBaseLocationRpc/selectPage.json",
          model: this.init_table_model(),
        }
        ,

      },


      dialog: {
        customClass: 'dialog_auto',
        submitUrl: '/wms-api/base/WmsBaseLocationRpc/saveUpdate.json',
        detailUrl: '/wms-api/base/WmsBaseLocationRpc/detail.json',
        form: {
          itemClass: "form_item_small", inputClass: "form_input_default",
          formClass: "form_small_col2 flex_row_wrap",
          // inline:true,
          model: [
            { header: "label_base_info", },


            { key: 'areaId', label: 'label_warehouse_area', type: 'base_area_select', keyExtra: { id: 'areaId', code: 'areaCode' } },
            {
              key: 'alleyId', label: 'label_tunnel', render: (h, { data }) => {

                return h('base_alley_select', {
                  class: 'form_input_default',
                  props: { value: data.alleyId, areaId: data.areaId },
                  on: {
                    changeItem: e => {
                      if (!e) e = { id: null, code: null }
                      this.$set(data, "alleyId", e.id)
                      data.alleyCode = e.code
                    }
                  }
                })
              }
            },


            {
              key: 'code', label: 'label_warehouse_location_code', render: (h, { data }) => {

                return h('div', {
                  class: 'flex_row_center'
                }, [
                  h('ex_super_input', {
                    class: 'flex_cell',
                    props: {
                      value: data.code,
                      attrs: {
                        placeholder: '输入编码前,请先知悉库位编码规则',
                        disabled: !!data.id,
                      }
                    },
                    on: {
                      input: e => this.$set(data, "code", e)
                    }
                  }),
                  h('el-tooltip', {
                    class: 'pd_h2',
                    style: "display: inline",
                    props: { placement: 'right' },
                  }, [
                    h('i', { class: 'el-icon-question' }),
                    h('div', {
                      slot: 'content',
                    }, [
                      h('label', "库位编码规则：仓库编码-货架号-H@货架层高-R@货架行数-C@货架列数 / 仓库编码-FLOOR-编号"),
                      h('br'),
                      h('label', "示例："),
                      h('br'),
                      h('label', "DA-SHELF_001-H@1-R@2-C@2（DA仓库SHELF_001号货架第1层第2行第2列)"),
                      h('br'),
                      h('label', "DA-FLOOR-0010 (DA仓库地面库位第10号)"),
                    ])
                  ])
                ])
              }
            },

            { key: 'shelf', label: 'label_shelf', },
            { key: 'shelfFloor', label: 'label_shelf_floor', type: 'input-number', },

            { key: 'status', label: 'label_status', type: 'select', enum: 'IsAvailableStatusEnum', },

            // { key: 'skuType', label: 'label_sku_type', },

            {
              key: 'categId', label: 'label_sku_categ', render: (h, { data }) => {
                return h('sku_categ_cascader', {
                  class: 'form_input_default',
                  props: {
                    categList: data.categList,
                    categId: data.categId,
                  },
                  on: {
                    'update:categList': e => this.$set(data, 'categList', e),
                    'update:categId': e => this.$set(data, 'categId', e),
                  }
                })
              }
            },
            { key: 'maxBoxNum', label: 'label_maximum_number_boxes', },
            { key: 'maxBoardNum', label: 'label_minimum_number_pallet', },
            { key: 'mixFlag', label: 'label_is_mix', type: 'select', enum: 'YesOrNoEnum' },
            { key: 'mixAllowBatchFlag', label: 'label_is_mix_batch', type: 'select', enum: 'YesOrNoEnum' },

            { key: 'length', label: 'label_length', append: 'cm', appendClass: 'input_slot_div_mini' },
            { key: 'width', label: 'label_width', append: 'cm', appendClass: 'input_slot_div_mini' },
            { key: 'height', label: 'label_height', append: 'cm', appendClass: 'input_slot_div_mini' },
            { key: 'weight', label: 'label_weight', append: 'kg', appendClass: 'input_slot_div_mini' },

            { key: 'volume', label: 'label_capacity', append: 'm³', appendClass: 'input_slot_div_mini' },

            { key: 'coordinateX', label: 'label_x_axis', },
            { key: 'coordinateY', label: 'label_y_axis', },
            { key: 'coordinateZ', label: 'label_z_axis', },
            { key: 'locationDirect', label: 'label_warehouse_location_toward', },

            { header: "label_business_rules", },

            { key: 'storageRatio', label: 'label_restriction_ratio', append: '%', appendClass: 'input_slot_div_mini' },
            { key: 'inboundLimitType', label: 'label_limit_inbound_type', type: 'select', enum: 'BaseLimitInboundTypeEnum' },
            { key: 'allowPick', label: 'label_allow_picking', type: 'select', enum: 'YesOrNoEnum' },
            { key: 'pickSort', label: 'label_picking_order', type: 'input-number', },


            { key: 'description', label: 'label_description', },

          ],
          default: {
            status: 'ENABLE'
          },
          rules: {
            'code': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
            'areaId': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
            'status': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
            'type': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
          },
        }
      },
    };
  },
  methods: {
    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 80,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        {
          key: 'code', label: 'label_warehouse_location_code', 'min-width': 220,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return this.$tt('data_temp_none')
            return (<text_extra_tooltip_operate
              value={code} extra_barcode_image extra_text_align='center'
              data_type={column.property} data_id={row.id}
            />)
          },

        },
        { key: 'status', label: 'label_warehouse_location_status', 'width': 130, formatter: (r, c, v, i) => this.$enumShow(v, "IsAvailableStatusEnum") },
        { key: 'areaCode', label: 'label_warehouse_area_code', 'width': 130, },
        { key: 'areaName', label: 'label_warehouse_area_name', 'width': 130, },
        { key: 'areaType', label: 'label_warehouse_area_type', 'width': 130, formatter: (r, c, v, i) => this.$enumShow(v, "BaseAreaTypeEnum") },
        // { key: 'warehouseCode', label: 'label_warehouse_code', },
        { key: 'warehouseName', label: 'label_warehouse_name', 'width': 130, },
        {
          key: 'mixFlag', label: 'label_is_mix', 'min-width': 80, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum"),
        },
        { key: 'maxBoxNum', label: 'label_maximum_number_boxes', 'min-width': 80, 'show-overflow-tooltip': true, },
        { key: 'maxBoardNum', label: 'label_minimum_number_pallet', 'min-width': 80, 'show-overflow-tooltip': true, },
        { key: 'creator', label: 'label_create_user', 'min-width': 120, 'show-overflow-tooltip': true, },
        { key: 'gmtCreate', label: 'label_create_time', 'min-width': 130, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$dateFormat(v) },
        {
          type: 'operate', fixed: 'right', width: 210, operate: [
            {
              label: 'label_edit', auth: 'wms_location_setting_edit', click: (row) => {
                this['$refs']['formDialog'].showNew({
                  title: this.$tt('label_edit_any', { type: 'label_warehouse_location', i18n: true }),

                  params: { "id": row["id"] },

                })
              }
            },
            {
              label: 'label_delete', auth: 'wms_location_setting_delete', type: "confirm-button", url: '/wms-api/base/WmsBaseLocationRpc/remove.json', message: '确定要删除该记录吗？',
              buttonClass: "button_text_danger", confirmButtonType: 'danger',
              params: (row) => { return { "id": row["id"] } }, done: ['reload', 'tip']
            },
            {
              type: 'more',
              items: [
                { label: "label_print_barcode", click: (row) => this.print([row]) },

                { label: 'label_view_detail', click: (row) => this.clickDetail(row) },

              ]
            },

          ]
        },
      ]
    },
    print(rows) {
      this.$refs.print_sku.show(rows)
    },
    uploadFile(cfg) {
      this.$uploadFile({
        loading: true,
        url: this.$url['wms/locationSettionImportExcel'],
        // url: '/wms-api/base/WmsBaseLocationRpc/importExcel.json',
        file: cfg.file,
        success: (res) => {
          this.$emitPage("wms>import_manage", 'reload')
          this.$confirm(this.$tt("tip_importing_confirm_goto_recode_list"), this.$tt('label_tip'), {
            type: 'success'
          }).then(() => {
            this.$router.push({
              path: '/page/wms/report/import_manage',
            });
          }).catch(() => {

          });
        }
      })
    },
    downloadImportTemp() {
      if (this.$clickFast()) return
      this.$downloadFile({
        loading: true,
        url: this.$url['wms/locationSettionDownloadImportTemp'],
        // url: '/wms-api/base/WmsBaseLocationRpc/downloadImportTemp.json',
        window
      })
    },
    submitAfter() {
      this.reload()
    },
    chagneArea(item) {
      this.formData.areaId = item.id
      this.formData.areaCode = item.code
    },

    clickDetail(row) {
      this.$refs['dialog_detail_location'].show({ params: { id: row.id }, title: this.$formatNameCode(this.$tt('label_warehouse_location_detail'), row.code) })
    },
  }
};

</script>
<style></style>
